<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="收款码管理" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view v-for="(item,index) in shoukuanlist" :key="index" class="mt20 item">
			<view class="left">
				<view>积分比例</view>
				<view class="info">{{item.bili}}%</view>
				
			</view>
			<view>
				<view class="right">
					<view class="switchBox">
						<switch :disabled="item.bili === 20" :checked="item.status==1" color="#FFCC33" style="transform:scale(0.8)" @change="asyncChange(item)"  ></switch>
					</view>
					<view class="set">
						设为默认
					</view>
					<view v-if="item.bili === 20" class="tips">
						*该比例为签约比例不可禁用
					</view>
					<view v-if="item.bili !== 20" class="delBox" @click="delCheck(index)">
						<text>删除</text>
						<image src="../../static/icons/del.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 160rpx;float: left;"></view>
		<view class="addBox">
			<text @click="addbili">添加比例</text>
		</view>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="删除" :content="messageText" @confirm="dialogConfirm"
			></uni-popup-dialog>
		</uni-popup>
		
		<u-picker @confirm="confirmText" @cancel="cancelText" :show="bilishow" :columns="bilicolumns" title='积分比例'></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:true,
				shoukuanlist:[
					{
						id:1,
						status:1,
						bili:20,
					},
					{
						id:2,
						status:0,
						bili:11
					},
					{
						id:3,
						status:1,
						bili:3
					},
					{
						id:3,
						status:1,
						bili:4
					}
				],
				bilishow:false,
				bilicolumns: [
				    ['3%','4%','5%','6%','7%','8%','9%','10%','11%','12%','13%','14%','15%','16%','17%','18%','19%','20%']
				],
				messageText:'',
				delBili:0,
			}
		},
		onLoad(){
			
		},
		methods: {
			asyncChange(e) {
				console.log(e)
				e.status = !e.status
			},
			addbili(){
				this.bilishow = true
			},
			confirmText(){
				console.log('confirm')
				this.bilishow = false
			},
			cancelText(){
				console.log('cancelText')
				this.bilishow = false
			},
			delCheck(index){
				this.delBili = this.shoukuanlist[index].id;
				this.messageText = `您确定要删除${this.shoukuanlist[index].bili}%的比例吗`;
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log(this.delBili);
				this.$refs.alertDialog.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		padding:20rpx 30rpx; 
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		.left{
			display: flex;
			flex-direction: column;
			.info{
				font-size:60rpx
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			.switchBox{
				// display: flex;
				// justify-content: flex-end;
				switch{
					float: right;
					margin-right: -15rpx;
				}
			}
			.set{
				display: flex;
				justify-content:flex-end;
				font-size:24rpx;
				color:#666666;
			}
			.tips{
				display: flex;
				justify-content: flex-end;
				font-size:24rpx;
				color:orangered
			}
			.delBox{
				width: 90rpx;
				height: 30rpx;
				float: right;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-top:3rpx;
					float: right;
				}
				text{
					line-height: 30rpx;
					font-size: 22rpx;
					float: right;
					color: #d81e06;
				}
			}
		}
	}
	.addBox{
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,0.15);
		text{
			width: 90%;
			margin-left: 5%;
			height: 80rpx;
			float: left;
			text-align: center;
			line-height: 80rpx;
			font-size: 34rpx;
			font-weight: bold;
			background-color: #f9bb34;
			margin-top: 20rpx;
			color: #fff;
			border-radius: 8rpx;
		}
	}
</style>